<template>
	<view class="body">
		<xk-header title="报修接单"></xk-header>
		<view class="list">
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>报修单号: {{ data.apply_no }}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item">
						<view class="key">报修人：</view>{{ data.apply_user || '暂无'}}
					</view>
					<view class="info-item">
						<view class="key">业主单位：</view>{{ data.apply_company_name || '暂无'}}
					</view>
					<view class="info-item">
						<view class="key">联系电话：</view>{{ data.apply_phone || '暂无电话'}}
					</view>
					<view class="info-item">
						
						<view class="key">物业编号：</view>{{ data.property_code || '暂无'}}
					</view>
					<view class="info-item">
						<view class="key">报修设施：</view>{{ data.buliding_no + data.storey_no + (data.repair_Address || "") }}
					</view>
					<view class="info-item">
						<view class="key">预约上门时间：</view>{{ data.appointment_time  || '暂无'}}
					</view>
					<view class="info-item">
						<view class="key">报修描述：</view><text>{{ data.repair_content || '暂无'}}</text>
					</view>
					<!-- <view class="info-item error"><view class="key">异常记录：</view>墙壁表层脱落</view> -->
					<view v-if="data.repair_image" class="info-item">
						<view class="key"></view>
						<image-list :pics="data.repair_image"></image-list>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item header" @click="more = !more">
				<view>工单受理</view>
				<image v-if="!more" src="/static/up.png"></image>
				<image v-else src="/static/down.png"></image>
			</view>
			<view v-if="more">
				<view class="list-item">
					<view>工单编号</view>
					<view>{{ data.apply_no }}</view>
				</view>
				<picker v-if="isMaster" :range="users" :value="userIndex === -1 ? 0 : userIndex" range-key="user_name"
					@change="userChange">
					<view class="list-item">
						<view>跟进人员:</view>
						<view :class="userIndex !== -1 ? 'right-title1' : 'right-title1 right-title1-empty'">{{ userIndex
							!==
							-1 ? users[userIndex].user_name : "请选择" }}</view>
						<!-- <image mode="aspectFill" class="jiantou" src="/static/jiantou.png" /> -->
					</view>
				</picker>
				<!-- <biaofun-datetime-picker :defaultValue="defaultDate" start="2000-02-03 00:00" end="2200-10-28 23:59"
					fields="minute" @change="dealTimeChange">
					<view class="list-item">
						<text :class="planTime ? 'right-title1' : 'right-title1 right-title1-empty'">{{ planTime ||
							"请选择" }}</text>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
					</view>
				</biaofun-datetime-picker> -->
				<view style="padding: 30rpx 20rpx;">
					<u-row>
						<u-col span="4">
							<view style="font-size: 28rpx;color: #999999;margin: 10rpx 0rpx;">按排上门时间：</view>
						</u-col>
						<u-col span="8">
							<view style="font-size: 28rpx;color: #999999;margin: 10rpx 0rpx;text-align: right;" @click="dateClick">{{
								planTime }}</view>
						</u-col>
					</u-row>
				</view>
				<view>
					<u-datetime-picker :show="show" @confirm="timeConfirm" @close="timeClose" @cancel="timeCancel"
						:closeOnClickOverlay="true" v-model="value1" mode="datetime" @change="dealTimeChange">
					</u-datetime-picker>
				</view>
			</view>
		</view>

		<view class="common-bottom-view">
			<view class="common-btn" v-if="isWorker" @click="startRepair">报修接单</view>
			<view class="common-btn" v-if="isMaster" @click="onDispatch">派单</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
import moment from 'moment'
export default {
	data() {
		return {
			isInList: false,
			show: false,
			repairId: '',
			eventName: "",
			data: {},
			backMore: false,
			more: true,
			orderMore: true,
			isMaster: false,
			isWorker: false,
			defaultDate: moment().format('YYYY-MM-DD HH:mm'),
			planTime: '请选择',
			value1: this.timeFommatted(new Date()),
			defaultDate: '',
			planDate: "",
			// planTime: "",
			receiverId: "", 	// 指定人员ID
			userIndex: -1,
			users: [],
		};
	},
	onLoad(options) {
		this.repairId = options.repairId
		this.getServiceRepairData();
		this.initInfo()
	},
	methods: {
		timeFommatted(currentTime){
			currentTime = new Date();
			var year = currentTime.getFullYear(); // 获取当前年份
			var month = currentTime.getMonth() + 1; // 获取当前月份（注意月份从0开始，因此需要加1）
			var day = currentTime.getDate(); // 获取当前日期
			var hours = currentTime.getHours(); // 获取当前小时
			var minutes = currentTime.getMinutes(); // 获取当前分钟
			var seconds = currentTime.getSeconds(); // 获取当前秒数
			return currentTime
		},
		timeConfirm(e) {
			// console.log('e0', e)
			this.show = false
			// this.defaultDate = e.value
			this.defaultDate2=moment(this.value1).format('YYYY-MM-DD HH:mm')
			this.defaultDate2 == '' ? this.planTime = '请选择' : this.planTime = this.defaultDate2
		},
		dateClick() {
			this.show = true
			// this.defaultDate2 == '' ? this.defaultDate = '请选择' : this.defaultDate = this.defaultDate2
		},
		timeClose() { this.show = false },
		timeCancel() { this.show = false },
		getServiceRepairData() {
			this.$api.baseData_getPmServiceRepair(this.repairId).then((res) => {
				this.data = res.pmServiceRepair
				console.log(3333,this.data)
				if (this.data.jd_status === "WAIT" &&
					this.$util.getRights().pm_service_repair_taking) {
					this.isWorker = true
				}

				if (this.data.jd_status === 'WAIT' &&
					this.$util.getRights().pm_service_repair_dispatch) {
					this.isMaster = true

					this.initInfo()
				}
			})
		},
		initInfo() {
			if (this.isMaster) {
				this.$api.baseData_getRepairWorkerList().then(res => {
					console.warn("维修人员列表：", res)
					this.users = res
				})
			}
		},
		userChange(e) {
			this.userIndex = e.detail.value;
			this.receiverId = this.users[this.userIndex].user_id
		},
		dealTimeChange(e) {
			console.log('eee',e)
			this.show = true
			this.value1 = e.value
			this.planTime = moment(e.value).format('YYYY-MM-DD HH:mm')
		},

		onDispatch() {
			if (!this.receiverId) {
				this.$util.toast("请选择指定人员")
				return
			}
			if (this.planTime=='请选择') {
				this.$util.toast("请选择按排上门时间")
				return
			}

			this.$util.confirm({
				content: "确定给 '" + this.users[this.userIndex].user_name + "' 进行接单操作？",
				confirmText: "派单"
			}).then(isConfirm => {
				if (isConfirm) {
					this.$util.post({
						url: "app/pmServiceRepair/dispatch",
						data: {
							repair_id: this.data.repair_id,
							receiver_id: this.receiverId,	// 指定人员ID
							plan_date: this.planTime	// 按排上门时间
						}
					}).then(res => {
						uni.$emit('refreshHomeDataList')
						uni.$emit('refreshServiceRepair')
						uni.redirectTo({
							url: '/pagesA/facility-repair/facility-repair-finish?type=accept'
						})
					})

				}
			})
		},
		startRepair() {
			if (this.planTime=='请选择') {
				this.$util.toast("请选择按排上门时间")
				return
			}
			this.$util.confirm({
				content: "确定要开始接单？",
				confirmText: "确定接单"
			}).then(isConfirm => {
				if (isConfirm) {
					this.$util.post({
						url: "app/pmServiceRepair/taking",
						data: {
							repair_id: this.data.repair_id,
							plan_date: this.planTime	// 按排上门时间
						}
					}).then(res => {
						uni.$emit('refreshHomeDataList')
						uni.$emit('refreshServiceRepair')
						uni.redirectTo({
							url: '/pagesA/facility-repair/facility-repair-finish?type=accept'
						})
					})

				}
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		// :first-child {
		// 	color: #999999;
		// }

		.right-title1 {
			flex: 1;
			text-align: right;
			color: #333;
		}

		.right-title1-empty {
			color: #ccc;
		}
	}

	.list-item2 {
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;

		:first-child {
			width: 150rpx;
		}
	}

	.header {
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;

		:first-child {
			flex: 1;
			color: #333333;
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}

.data-item {
	// display: flex;
	// margin-bottom: 30rpx;
	padding: 0 20rpx 20rpx;

	.order-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;

		text {
			font-weight: bolder;
		}
	}

	.order-info {
		margin: 20rpx 0;

		.info-item {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			color: #333333;
			line-height: 50rpx;

			.key {
				min-width: 150rpx;
				font-size: 28rpx;
				color: #999999;
			}

			.not-null {
				margin: 10rpx 0rpx;
				color: #59A0FF;
			}

			.date {
				flex: 1;
			}

			.info-imgs {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 10rpx;

				.img-item {
					width: 120rpx;
					height: 120rpx;
					margin: 2rpx 2rpx 0 0;
				}
			}
		}

		.error {
			color: #FF3737;
		}
	}
}
</style>
